<template>
  <div class="all">
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator="|">
        <el-breadcrumb-item :to="{ path: '/teach/grade' }"><i class="el-icon-back"></i>返回</el-breadcrumb-item>
        <el-breadcrumb-item>{{currentClass}}成绩表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 表格 -->
      <div>
        <el-table :data="
          tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
        " border style="width: 100%">
          <el-table-column prop="date" label="序号" width="fit:true">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="fit:true">
          </el-table-column>
          <el-table-column prop="address" label="单选题成绩" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="多选题成绩" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="判断题成绩" width="fit:true">
          </el-table-column>
          <el-table-column prop="score" label="总成绩" sortable width="fit:true">
          </el-table-column>
          <el-table-column prop="level" label="等级" width="fit:true">
            <template slot-scope="scope">
              <el-tag :type="levelType(scope.row.level)">{{scope.row.level}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next" :total="12">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小经',
          address: '上海市普陀区金沙江路 1518 弄',
          score: 88,
          level: '良'
        },
        {
          date: '2016-05-04',
          name: '王小咯',
          address: '上海市普陀区金沙江路 1517 弄',
          score: 60,
          level: '中'
        },
        {
          date: '2016-05-01',
          name: '王小两',
          address: '上海市普陀区金沙江路 1519 弄',
          score: 45,
          level: '差'
        },
        {
          date: '2016-05-03',
          name: '王小',
          address: '上海市普陀区金沙江路 1516 弄',
          score: 100,
          level: '优'
        }
      ],
      // 默认显示第一页
      currentPage: 1,
      // 默认每页显示的条数（可修改）
      PageSize: 5,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [1, 2, 3, 4],
      // 当前考试
      // currentClass: this.$route.query.class,
      currentClass: ''
      // currentExam: JSON.parse(this.currentExam)
    }
  },
  computed: {
    // ...mapState({ currentExam: (state) => state.smy.currentExam }),

  },
  mounted () {
    this.getCurrentExam()
  },
  methods: {
    ...mapMutations(['setCurrentStuDetail']),
    getCurrentExam () {
      this.currentClass = JSON.parse(localStorage.getItem('currentExam')).class
      console.log(this.currentClass)
    },
    // 不同等级展示不同样式
    levelType (level) {
      const bindColor = {
        差: 'danger',
        优: 'success',
        中: 'info',
        良: 'warning'
      }
      return bindColor[level]
    },
    handleEdit (index, row) {
      console.log(index, row)
      // this.$router.push("/gradeStudentdetail");
      // this.$router.push("/gradeStudentdetail");
      this.setCurrentStuDetail(row)
      this.$router.push({
        path: '/teach/grade/gradeDetail/MyRadio/1'
        // query: {
        //   name: row.name,
        //   score:row.score
        // }
      })
    },
    handleSizeChange (val) {
      this.PageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    // 分页功能
    getData () {
      this.$api.info().then((res) => {
        console.log(res)
        // 渲染表格
        this.tableData = res.data.data
        // 获取数据长度
        this.totalCount = data.data.length
      })
    }

  }
}
</script>

<style scoped>
.all {
  margin-top: 20px;
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
}

/* .el-breadcrumb {
  margin: 0 0 20px 0;
} */

::v-deep.el-pagination {
  text-align: center;
}
</style>
